<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>订单详情-待付款</title>

		<style>
			.content ul{
				background-color: #fff;
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
				margin-bottom: 10px;
			}
			.content ul:first-child{
				border-top: 1px solid #dcdcdc;
			}
			.content ul li{
				position: relative;
				padding: 8px 0;
				margin: 0 15px;
				font-size: 14px;
				color: #42455c;
			}
			.content .left{
				position: absolute;
				left: 0;
				line-height: 18px;
			}
			.content .right{
				display: block;
				margin-left: 70px;
				line-height: 18px;
			}
			.canceled{
				color: #b4b4b4;
			}
			button.select-again{
				position: absolute;
				right: 0;
				top: 0px;
				display: inline-block;
				padding: 5px;
				border: none;
				border-radius: 4px;
				background-color: #53ceca;
				color: #fff;
				font-size: 16px;
				font-weight: 600;
			}
			.money-icon,
			.money{
				line-height: 12px;
				font-weight: 600;
				color: #e95656;
			}
			.money{
				font-size: 18px;
				margin-left: 5px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<ul>
				<li>
					<span class="left">订单号:</span>
					<span class="right">23093409850437</span>
				</li>
				<li class="select">
					<span class="left">订单状态:</span>
					<span class="right canceled">已取消</span>
					<button class="select-again" href="">重新选课</button>
				</li>
			</ul>
			<ul>
				<li>
					<span class="left">上课老师:</span>
					<span class="right">默瀚</span>
				</li>
				<li>
					<span class="left">上课地点:</span>
					<span class="right">上门，朝阳区姚家园路12号啦啦啦小区17栋502室</span>
				</li>
				<li>
					<span class="left">上课时间:</span>
					<span class="right">08.18周四 16:00-17:00</span>
				</li>
				<li>
					<span class="left">课程单价:</span>
					<span class="right">¥200</span>
				</li>
				<li>
					<span class="left">购买数量:</span>
					<span class="right">1次</span>
				</li>
				<li>
					<span class="left">取消政策:</span>
					<span class="right">可免费取消</span>
				</li>
			</ul>
			<ul>
				<li>
					<span class="left">支付总额</span>
					<span class="right"><span class="money-icon">¥</span><span class="money">200</span></span>
				</li>
				<li>
					<span class="left">支付时间:</span>
					<span class="right">2015.08.20 15:27</span>
				</li>
			</ul>
			<ul>
				<li>
					<span class="left">退款金额:</span>
					<span class="right"><span class="money-icon">¥</span><span class="money">200</span></span>
				</li>
				<li>
					<span class="left">退款时间:</span>
					<span class="right">2015.08.20 17:43</span>
				</li>
			</ul>
		</div>
	</body>
</html>